<!--月度接受检查情况统计分析-->
<template>
  <Layout class="menu-left">
    <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
      <Row v-show="!switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="企业名称：" prop="order">
            <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                          :currentOrgId="dataToQuery.companyId"
                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="月份：" prop="month">
            <DatePicker class="query-form-el" v-model="dataToQuery.monthStart" format="yyyy-MM" type="month"
                        placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                        @on-change="(date) => { dataToQuery.monthFrom = date + '-01'}"
                        :options="{disabledDate(date) {return date && dataToQuery.monthEnd && date.valueOf() > dataToQuery.monthEnd;}}"></DatePicker>
            -
            <DatePicker class="query-form-el" v-model="dataToQuery.monthEnd" format="yyyy-MM" type="month"
                        placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                        @on-change="(date) => { dataToQuery.monthTo = date + '-01'}"
                        :options="{disabledDate(date) {return date && dataToQuery.monthStart && date.valueOf() < dataToQuery.monthStart;}}"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="企业名称：" prop="belongOrgId">
            <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                          :currentOrgId="dataToQuery.companyId"
                          :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='年度：' prop='year'>
            <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate'
                        type="year"></DatePicker>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="项目名称：" prop="projectName">
            <Input v-model='dataToQuery.projectName' class="query-form-el"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
        </Col>
      </Row>
    </Form>
    <Row style="margin-right:10px; margin-top: 5px;">
      <Col span="24">
        <Card dis-hover>
          <div ref="acceptContainer" style="height: 300px;"></div>
        </Card>
      </Col>
    </Row>
    <div class="table-box">
      <Table ref='table' :height='this.Common.tableHeightNum' no-data-text="没有查询到相关数据!" :loading='pageStatus.loading'
             :row-class-name="(row,index)=>(index===0)?'table-summary-row':''"
             border :columns="columns1" :data="dataTable">
      </Table>
    </div>
    <!-- <Row style="margin-right:10px;">
         <Col span="24" >
         <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
         </Col>
     </Row>-->
  </Layout>
</template>
<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import echarts from 'echarts'

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  name: "investmentStatistics",
  components: {
    cascaderDom
  },
  data() {
    return {
      ...this.createCommonDataField(),
      columns1: [
        {
          title: '序号', width: 80, fixed: 'left', align: 'center', render: (h, params) => {
            if (params.row.companyName === '汇总') return h('span', "汇总");
            return h('span', (params.index) + (this.pagedata.currentPage - 1) * this.pagedata.pageSize);
          }
        },
        {
          key: 'companyName', title: '单位名称', fixed: 'left', align: 'center', minWidth: 240, render: (h, params) => {
            if (params.row.companyName === '汇总') return h('span', "");
            return h('span', params.row.companyName);
          }
        },
        {key: 'stateEnInspect', title: '接受国家部、委环境督查检查', align: 'center', width: 160},
        {key: 'provinceEnInspect', title: '接受省、自治区、直辖市级环境督查检查', align: 'center', width: 160},
        {key: 'districtEnInspect', title: '接受属地市、区、县级环境督查检查', align: 'center', width: 160},
        {key: 'enPunishTeims', title: '因环境保护问题受到处罚、曝光情况', align: 'center', width: 160},
        {key: 'stateSaInspect', title: '接受国家部、委安全督查检查', align: 'center', width: 160},
        {key: 'provinceSaInspect', title: '接受省、自治区、直辖市级安全督查检查', align: 'center', width: 160},
        {key: 'districtSaInspect', title: '接受属地市、区、县级安全督查检查', align: 'center', width: 160},
        {key: 'saPunishTeims', title: '因安全问题受到处罚、曝光情况', align: 'center', width: 160},
        {key: 'total', title: '合计', align: 'center', fixed: 'right', minWidth: 100},
      ],
      tableHeight: 10,
      // 切换标签
      modaleShow: 1,
      // api
      queryUrl: Api.reportSafeRptAcceptInspect,
      statistical: {}
    }
  },
  mounted() {
    this.setTableHeight()
    this.query();
  },
  methods: {
    ...pageCommonFunction,
    query() {
      this.dataToQuery.twoLevelOrgId = this.currentUser.twoLevelOrgId ? this.currentUser.twoLevelOrgId : undefined
      /* if(!this.dataToQuery.yearDate) {
           this.dataToQuery.yearDate = new Date();
       }
       if(this.dataToQuery.yearDate) {
           this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
       }*/
      if (!this.dataToQuery.companyId) {
        this.dataToQuery.companyId = undefined
      }
      // this.queryAjax();
      this.pageStatus.loading = true
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        conditions: this.dataToQuery
      };

      this.$http.post(this.queryUrl, data).then((res) => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.chartStatistical();
        this.pageStatus.loading = false
      }).catch(e => {
        this.$Message.error("数据获取失败")
        this.pageStatus.loading = false
      })
    },
    lowerStep(name) {
      this.modaleShow = name
      if (name == 1) {
        this.queryUrl = Api.reportEnRptInvestment
      } else {
        this.queryUrl = Api.reportEnRptInvestmentPlan
      }
      this.setTableHeight()
      this.query();

    },

    chartStatistical() {
      this.statistical = {
        companyName: [],
        stateEnInspect: [],
        provinceEnInspect: [],
        districtEnInspect: [],
        enPunishTeims: [],
        stateSaInspect: [],
        provinceSaInspect: [],
        districtSaInspect: [],
        saPunishTeims: [],
        total: []
      }
      for (var i = 0; i < this.dataTable.length; i++) {
        let item = this.dataTable[i]
        if (item.companyName == '汇总') {
          this.statistical.companyName.push("北京金隅集团股份有限公司")
        } else {
          this.statistical.companyName.push(item.companyName)
        }
        this.statistical.stateEnInspect.push(item.stateEnInspect)
        this.statistical.provinceEnInspect.push(item.provinceEnInspect)
        this.statistical.districtEnInspect.push(item.districtEnInspect)
        this.statistical.enPunishTeims.push(item.enPunishTeims)
        this.statistical.stateSaInspect.push(item.stateSaInspect)
        this.statistical.provinceSaInspect.push(item.provinceSaInspect)
        this.statistical.districtSaInspect.push(item.districtSaInspect)
        this.statistical.saPunishTeims.push(item.saPunishTeims)
        this.statistical.total.push(item.total)
      }
      let container = echarts.init(this.$refs.acceptContainer);
      let option = this.getOption();
      container.setOption(option);
      window.onresize = container.resize;
    },
    getOption() {
      let option = {
        tooltip: {	//提示框组件
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {	//图例组件
          data: ['接受国家部、委环境督查检查', '接受省、自治区、直辖市级环境督查检查', '接受属地市、区、县级环境督查检查',
            '因环境保护问题受到处罚、曝光情况', '接受国家部、委安全督查检查',
            '接受省、自治区、直辖市级安全督查检查', '接受属地市、区、县级安全督查检查',
            '因安全问题受到处罚、曝光情况', '合计']
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66'],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true,
        },
        dataZoom: [{
          type: 'inside'
        }, {
          type: 'slider',
          textStyle: false
        }],
        xAxis: [
          {
            type: 'category',
            data: this.statistical.companyName,
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                var str = "";
                var num = 6; //每行显示字数
                var valLength = value.length; //该项x轴字数
                var rowNum = Math.ceil(valLength / num); // 行数
                if (rowNum > 1) {
                  for (var i = 0; i < rowNum; i++) {
                    var temp = "";
                    var start = i * num;
                    var end = start + num;
                    temp = value.substring(start, end) + "\n";
                    str += temp;
                  }
                  return str;
                } else {
                  return value;
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '接受国家部、委环境督查检查',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.stateEnInspect
          },
          {
            name: '接受省、自治区、直辖市级环境督查检查',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.provinceEnInspect
          },
          {
            name: '接受属地市、区、县级环境督查检查',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.districtEnInspect
          },
          {
            name: '因环境保护问题受到处罚、曝光情况',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.enPunishTeims
          },
          {
            name: '接受国家部、委安全督查检查',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.stateSaInspect
          },
          {
            name: '接受省、自治区、直辖市级安全督查检查',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.provinceSaInspect
          },
          {
            name: '接受属地市、区、县级安全督查检查',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.districtSaInspect
          },
          {
            name: '因安全问题受到处罚、曝光情况',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.saPunishTeims
          },
          {
            name: '合计',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.total
          }
        ]
      };
      return option;
    }
  }
}
</script>
<style scoped>
/deep/ .table-box .ivu-table-header th {
  position: static;
  border: 1px solid #ddd;
}
</style>
